<template>
  <div style="height: 1500px">

    <div style="margin-top: 20px;margin-left: 10px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>查询信息管理</b></el-breadcrumb-item>
        <el-breadcrumb-item>查询行李信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="luggage-info-system" style="margin-top: 51px">
    <el-header>
<!--        <img src="@/assets/imgs/luggage3.png" alt="" style="height: 466px;width: 1240px"/>-->
      <!-- Footer Content -->
      <!-- Logo and Navigation -->
      <div class="user-query">
        <el-form :model="searchFormModel" ref="searchForm">
          <el-form-item label="航班号" style="margin-left: 5%;font-size: 18px" prop="FLID">
            <el-input v-model="searchFormModel.FLID" placeholder="请输入航班号" style="width: 200px"
                      :rules="[{ required: true, message: '请输入航班号', trigger: 'blur' }]" clearable>
            </el-input>
            <el-button @click="searchOnSubmit" type="primary" style="margin-left: 5%" :disabled="!searchFormModel.FLID">
              查询行李信息
            </el-button>
          </el-form-item>

        </el-form>
      </div>
      <!-- 数据表格 -->
      <div class="mn">
        <div class="lg">
          <el-table :data="tableLuggage" stripe border style="width: 1200px;height: 240px;">
            <el-table-column prop="flid" label="航班号" width="90" />
            <el-table-column prop="id" label="行李提取转盘唯一标识" width="170" />
            <el-table-column prop="code" label="行李提取转盘编号" width="150" />
            <el-table-column prop="btat" label="行李提取转盘属性" width="150" >
              <template #default="scope">
                <span v-if="scope.row.btat==2403">国内</span>
                <span v-if="scope.row.btat==2402">地区</span>
                <span v-if="scope.row.btat==2401">国际</span>
                <span v-if="scope.row.btat==2404">混合</span>
              </template>
            </el-table-column>
            <el-table-column prop="estr" label="预计开始时间" width="160" />
            <el-table-column prop="eend" label="预计结束时间" width="160" />
            <el-table-column prop="rstr" label="实际开始时间" width="160" />
            <el-table-column prop="rend" label="实际结束时间" width="160" />
          </el-table>
        </div>
      </div>
    </el-header>
    <el-main>
      <div class="luggage-rules" >
        <el-card>
          <div class="rule-item">
            <h2>托运行李规则</h2>
            <p><b>国内航班：</b>每件托运行李的长、宽、高三边之和须大于或等于60厘米或24英寸，且小于或等于203厘米或80英寸，包括滑轮和把手。每件免费托运行李的长、宽、高限制分别为100厘米或39英寸、60厘米或24英寸、40厘米或16英寸。</p>
            <p><b>国际/地区航班：</b>每件免费托运行李的长、宽、高三边之和不得超过158厘米或62英寸，包括滑轮和把手。</p>
            <p>需要注意的是，以上行李的重量限制并非免费行李额，旅客需要为超过免费行李额的部分支付超限额行李费用。超过以上行李重量限制的行李，不得作为行李运输。建议将行李拆开分装，或按照货物运输。</p>
          </div>
        </el-card>
      </div>
      <div>
        <div class="big">
      <el-container>
        <el-aside width="550px">
          <img src="@/assets/imgs/luggage2.png" alt="" style="height: 250px;width: 500px"/>
        </el-aside>
        <el-main>
          <div class="tb">
            <div class="luggage-fees">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="type" label="舱位" width="150" />
                <el-table-column prop="free" label="免费托运行李额" width="150" />
              </el-table>
            </div>
          </div>
        </el-main>
      </el-container>
      </div>
      </div>
      <div class="main">
        <img src="../../assets/imgs/luggage.png" height="350" width="100%"/><br/>
      </div>
    </el-main>
    <el-footer>


    </el-footer>
  </div>
  </div>
</template>

<script setup>

import request from "@/utils/request";
import {onMounted, reactive, ref} from "vue"
import {ArrowRight} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Edit, Search, Sort} from "@element-plus/icons";
let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token

//访问界面初始化
onMounted(()=>{

})

const searchOnSubmit= () => {
  request({
    url: '/query/querysuitcase/querysuitcasebyflid',
    method: 'get',
    params: searchFormModel,
    headers: {
      'token': token
    }
  }).then(res => {
    if (200 == res.data.errorCode) {
      //请求成功后将数据上传到表格
      tableLuggage.value = res.data.data
    }
  })

}
///////// 表格 //////////////////
//表格数据
const tableLuggage = ref([])

//表单的引用
const searchFormRef=ref()
//表单的数据模型
const searchFormModel =reactive({
  flid : '',
  btno : '',
  id : '',
  code : '',
  btat : '',
  estr : '',
  eend : '',
  rstr: '',
  rend: ''
})

const tableData = [
  {
    type: '公务舱',
    free: '30kg',
  },
  {
    type: '经济舱',
    free: '20kg',
  },
]
</script>
<style scoped>
.luggage-info-system{
  //height: 700px;
}
.luggage-rules{
  margin-top: 290px;
}
.luggage-fees, .special-luggage, .luggage-tracking{
  margin-top: 50px;
}
.user-query {
  margin-top: 15px;
}
p {
  text-align: left;
}
.mn{
  padding-top: 10px;
}
.lg{
  width: 1200px;
  padding: 2px 2px;
  margin-left:0%;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
}
.pagination button {
  padding: 8px 16px;
  margin: 0 5px;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  cursor: pointer;
}
.pagination button.active {
  background-color: #4680b2;
  color: white;
  border-color: #3685c7;
}
.main{
  padding-top: 1px;
  padding-bottom: 1px;
}
/* 更多样式... */
.tb{
  padding-left: 100px;
  width: 300px;
  height: 200px;
  text-align: center;
}
.big{
  padding-top: 50px;
}
</style>